<template>
	<view class="loginPage">
		<view class="welcomeLogin">
			<view class="logo">
				<img class="img" src="../../static/logo.png" alt="">
			</view>
		</view>
		<view class="content">
			<view class="submitNav">
				<view class="loginBox">
					<view class="leftImg">
						<image src="../../static/img/phone.png" mode=""></image>
					</view>
					<view class="rightInput">
						<input class="uni-input" maxlength="11" :value="telephone" placeholder="请输入您的手机号码" @input="onInputU"/>
					</view>
				</view>
				<view class="loginBox">
					<view class="leftImg">
						<image src="../../static/img/password.png" mode=""></image>
					</view>
					<view class="rightInput">
						<input class="uni-input" maxlength="20" :value="password" :type="hiddenPass" placeholder="请输入密码:6-20位字母/数字" @input="onInputP"/>
					</view>
				</view>
				<view class="loginBox">
					<view class="leftImg">
						<image src="../../static/img/message.png" mode=""></image>
					</view>
					<view class="rightInput codeBox">
						<input class="uni-input" maxlength="20" v-model="code" placeholder="请输入验证码"/>
						<img :src="codeImg" class="codeImg" alt="" @click="getVerify">
					</view>
				</view>
			</view>
			<view class="submitBtn">
				 <button type="primary" class="btn" :disabled="(telephone&&password)?false:true" @tap="register">注册</button>
				 <view class="noAccount">
				 	已有账号？<text class="registerUser" @tap="login">立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				telephone: '',
				password: '',
				code: '',
				hiddenPass:'password',
				codeImg: this.websiteUrl + '/file/getVerify'
			}
		},
		methods: {
			onInputU(e) {
				this.telephone = e.detail.value;
			},
			onInputP(e) {
				this.password = e.detail.value;
			},
			login(){
				uni.navigateTo({
					url: './login',
				});
			},
			getVerify(){
				this.codeImg = this.websiteUrl + '/file/getVerify?'+new Date().getTime();
			},
			register(){
				uni.showLoading({
					title:'注册中...'
				});
				let data = {
					username: this.telephone,
					password: this.password,
					velCode: this.code,
				};
				var url = this.websiteUrl + '/user/register';
				this.webhttp(url,data,'POST').then(res=>{
					uni.hideLoading();
					if(res.code == 200){
						uni.showToast({
							title:'注册成功',
							icon: 'none'
						})
						this.$store.commit('setToken', res.data.token);
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}else{
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.loginPage{
	background: #fff;
	height: 100vh;
	.welcomeLogin{
		padding: 150rpx 0 60rpx;
		text-align: center;
		.logo{
			.img{
				width: 163rpx;
			}
		}
		.text{
			font-size: 48rpx;
			font-weight: 600;
			color: #111;
			line-height: 64rpx;
			margin-top: 37rpx;
		}
	}
	.content{
		padding: 0 60rpx;
	}
	.submitNav{
		.loginBox{
			height: 86rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			border: 2rpx solid #dedede;
			border-radius: 8px;
			margin-bottom: 48rpx;
			overflow: hidden;
			&:last-child{
				margin: 0;
			}
			.leftImg{
				width: 86rpx;
				height: 86rpx;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.rightInput{
				width: calc(100% - 86rpx);
				.uni-input{
					height: 86rpx;
					line-height: 86rpx;
					padding: 0 40rpx;
				}
			}
			.codeBox{
				position: relative;
				.codeImg{
					width: 150rpx;
					display: block;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 20rpx;
				}
			}
		}
	}
	.forgetBtn{
		margin: 48rpx 0;
		color: #999999;
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
	}
	.submitBtn{
		margin: 88rpx 0 0;
		.btn{
			background: #FF836F;
			font-size: 36rpx;
			font-weight: 400;
			color: #fff;
			height: 88rpx;
			line-height: 88rpx;
			border: none;
			&::after{
				display: none;
			}
		}
	}
	.noAccount{
		text-align: center;
		margin: 20rpx 0;
		color: #999999;
		.registerUser{
			color: #333333;
			font-weight: 500;
		}
	}
}
</style>
